﻿<%@ Page Title="Help - Custom Layout" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="customlayout.aspx.cs" Inherits="Support_customlayout" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h2>Custom Layout</h2>
<br />
<h4>Purpose:</h4>
This allows you to customize the design and layout of the page. It allows you to easily add static content and design to the page without disrupting the widgets' operation.<br />

<h4>Methods of Access:</h4>
<ol>
<li>Clicking on <u>Modify Layout</u> from your space,</li>
<li>or clicking on the <u>Menu</u> image and selecting <u>Layout</u> in the menu that appears.</li>
</ol>
<img src="customlayout.gif" border="0" />

<h4>Usage:</h4>
<b>Key Parameters</b>
<li>A &lt;DIV&gt; tag with an id attribute of <u>WTab</u> </li>
<li>Up to 4 drop zones with an id attributes in the following format: td_[x] where x is the drop zone id. (e.g td_1, td_2)</li>
<li>If you are using tables, remember to include a TBODY tag after the TABLE tag</li>

<br /><br />The following demonstrates a page layout with a drop zone at the top following by 3 drop zones side by side.<br />
   <br />
   <br />
<font SIZE="2" COLOR="#008000">&lt;!-- #1 A DIV tag with id attribute of 
WTab --&gt;<br />
</font><font SIZE="2" COLOR="#0000ff">
&lt;</font><font SIZE="2" COLOR="#a31515">div</font><font SIZE="2"> </font>
<font SIZE="2" COLOR="#ff0000">id</font><font SIZE="2" COLOR="#0000ff">=&quot;WTab&quot;&gt;<br />
&lt;</font><font SIZE="2" COLOR="#a31515">table</font><font SIZE="2"> </font>
<font SIZE="2" COLOR="#ff0000">height</font><font SIZE="2" COLOR="#0000ff">=&quot;250&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">width</font><font SIZE="2" COLOR="#0000ff">=&quot;100%&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">border</font><font SIZE="2" COLOR="#0000ff">=&quot;0&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">cellpadding</font><font SIZE="2" COLOR="#0000ff">=&quot;0&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">cellspacing</font><font SIZE="2" COLOR="#0000ff">=&quot;0&quot;&gt;<br />
</font><font SIZE="2" COLOR="#008000">
&lt;!-- TBODY tag after TABLE tag --&gt;<br />
</font><font SIZE="2" COLOR="#0000ff">
&lt;</font><font SIZE="2" COLOR="#a31515">tbody</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;</font><font SIZE="2" COLOR="#a31515">tr</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">valign</font><font SIZE="2" COLOR="#0000ff">=&quot;top&quot;&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#008000">&lt;!-- Fourth Drop Zone, id attribute 
equals td_4 --&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">colspan</font><font SIZE="2" COLOR="#0000ff">=&quot;3&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">id</font><font SIZE="2" COLOR="#0000ff">=&quot;td_4&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">style</font><font SIZE="2" COLOR="#0000ff">=&quot;</font><font SIZE="2" COLOR="#ff0000">position</font><font SIZE="2">:
</font><font SIZE="2" COLOR="#0000ff">relative</font><font SIZE="2">;</font><font SIZE="2" COLOR="#ff0000">height</font><font SIZE="2">:</font><font SIZE="2" COLOR="#0000ff">3px&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">width</font><font SIZE="2" COLOR="#0000ff">=&quot;100%&quot;&gt;&lt;/</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;/</font><font SIZE="2" COLOR="#a31515">tr</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;</font><font SIZE="2" COLOR="#a31515">tr</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">valign</font><font SIZE="2" COLOR="#0000ff">=&quot;top&quot;&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#008000">&lt;!-- First Drop Zone, id attribute 
equals td_1 --&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">id</font><font SIZE="2" COLOR="#0000ff">=&quot;td_1&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">style</font><font SIZE="2" COLOR="#0000ff">=&quot;</font><font SIZE="2" COLOR="#ff0000">position</font><font SIZE="2">:
</font><font SIZE="2" COLOR="#0000ff">relative&quot;</font><font SIZE="2"> </font>
<font SIZE="2" COLOR="#ff0000">width</font><font SIZE="2" COLOR="#0000ff">=&quot;33%&quot;&gt;&lt;/</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#008000">&lt;!-- Second Drop Zone, id attribute 
equals td_2 --&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">id</font><font SIZE="2" COLOR="#0000ff">=&quot;td_2&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">style</font><font SIZE="2" COLOR="#0000ff">=&quot;</font><font SIZE="2" COLOR="#ff0000">position</font><font SIZE="2">:
</font><font SIZE="2" COLOR="#0000ff">relative&quot;</font><font SIZE="2"> </font>
<font SIZE="2" COLOR="#ff0000">width</font><font SIZE="2" COLOR="#0000ff">=&quot;34%&quot;&gt;&lt;/</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#008000">&lt;!-- Third Drop Zone, id attribute 
equals td_3 --&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">id</font><font SIZE="2" COLOR="#0000ff">=&quot;td_3&quot;</font><font SIZE="2">
</font><font SIZE="2" COLOR="#ff0000">style</font><font SIZE="2" COLOR="#0000ff">=&quot;</font><font SIZE="2" COLOR="#ff0000">position</font><font SIZE="2">:
</font><font SIZE="2" COLOR="#0000ff">relative&quot;</font><font SIZE="2"> </font>
<font SIZE="2" COLOR="#ff0000">width</font><font SIZE="2" COLOR="#0000ff">=&quot;33%&quot;&gt;&lt;/</font><font SIZE="2" COLOR="#a31515">td</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font><font SIZE="2">
</font><font SIZE="2" COLOR="#0000ff">&lt;/</font><font SIZE="2" COLOR="#a31515">tr</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
&lt;/</font><font SIZE="2" COLOR="#a31515">tbody</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
&lt;/</font><font SIZE="2" COLOR="#a31515">table</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
&lt;/</font><font SIZE="2" COLOR="#a31515">div</font><font SIZE="2" COLOR="#0000ff">&gt;<br />
</font>

<br /><br />Copy &amp; Paste the following text to implement the same zones as the example<br />
<textarea rows="5" cols="10" style="width:95%">
<div id="WTab">
<table height="250" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
   <tr valign="top">
      <td colspan="3" id="td_4" style="position: relative;height:3px" width="100%"></td>
   </tr>
   <tr valign="top">
      <td id="td_1" style="position: relative" width="33%"></td>
      <td id="td_2" style="position: relative" width="34%"></td>
      <td id="td_3" style="position: relative" width="33%"></td>
   </tr>
</tbody>
</table>
</div>
</textarea>
</asp:Content>

